require('./PagePayplan.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { Group, TextField, SelectField, Button, Boxs, Toast, Dialog } = SaltUI;
const { HBox, Box } = Boxs;
import Addpersonfield from 'components/addpersonfield'
const Fileselect = require('components/fileselect')
const classNames = require("classnames")
import { getTime } from 'clientConfig/util/queryurlfield';

const options = [
    { value: 0, text: '35%' },
    { value: 1, text: '65%' },
    { value: 2, text: '100%' },
    { value: 3, text: '自定义' },
]
const paypointeName = [
    { value: 0, text: '合同签订' },
    { value: 1, text: '方案评审' },
    { value: 2, text: '项目实施／开发' },
    { value: 3, text: '三方测试' },
    { value: 4, text: '测试报告' },
    { value: 5, text: '项目初验' },
    { value: 6, text: '试运行' },
    { value: 7, text: '项目终验' },
]
var formName = [{ label: "支付总金额", name: "proTotalMoney", mark: 1 }, { label: "支付节点1", name: "paypointe1", mark: 0 }, { label: "支付比例1", name: "payProportion1", mark: 0 }, { label: "支付金额1", name: 'proMoney1', mark: 1 }, { label: "支付节点2", name: "paypointe2", mark: 0 }, { label: "支付比例2", name: "payProportion2", mark: 0 }, { label: "支付金额2", name: 'proMoney2', mark: 1 },];
class Payplan extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            upfileName: [],
            unionid: [],
            showConfirm: false,
            proMoney2: '',
            proMoney1: '',
            proTotalMoney: '',
            loading: false
        };
        this.paypointerNum = 0;
        this.otherData = {};
        this.appUnionid = [];
        this.csrUnionid = [];
    }
    handleShow(isConfirm, value) {
        let t = this;
        if (isConfirm) {
            if (value != value - 0) {
                Toast.show({
                    type: 'error',
                    content: "请填写100以内的数字,例如：65",
                });
            } else {
                var reg = new RegExp("^(\\d|[1-9]\\d|100)$")
                if (!reg.test(value))
                    Toast.show({
                        type: 'error',
                        content: "请填写100以内的百数字,例如：65",
                    });
                else {
                    var showResult = { value: 0, text: value + '%' }
                    if (value != 100) {//两个支付节点
                        var payProportion = 100 - value;
                        t.setState({
                            payProportion2: {
                                value: 0,
                                text: payProportion + '%',
                            },
                            proMoney2: (parseFloat(t.state.proTotalMoney) * parseFloat(payProportion) / 100).toString(),
                            hide: false
                        })
                        t.paypointerNum = 2;
                    } else {//一个支付节点
                        t.paypointerNum = 1;
                        formName = [{ label: "支付总金额", name: "proTotalMoney", mark: 1 }, { label: "支付节点1", name: "paypointe1", mark: 0 }, { label: "支付比例1", name: "payProportion1", mark: 0 }, { label: "项目金额1", name: "proMoney1", mark: 1 }]
                        t.setState({
                            hide: true
                        })
                    }
                    t.setState({
                        payProportion1: showResult,
                        proMoney1: (parseFloat(t.state.proTotalMoney) * parseFloat(value) / 100).toString()
                    });
                }
            }
        }
        this.setState({
            showConfirm: false
        })
    }
    handleTextChange(name, newValue) {
        let t = this;
        if (name == 'proName') {
            this.setState({
                proNum: this.state.proNumAll[newValue.value],
                proj_webhook: this.state.webhookAll[newValue.value],
                folder_id: this.state.proNameAll[newValue.value]["folder_id"],
                path_name: ''
            }, () => {
                console.log(t.state)
            })
        }
        if (name == "paypointe1") {
            if (this.state.paypointe2 && newValue.text == this.state.paypointe2["text"]) {
                Toast.show({
                    type: "error",
                    content: "同一节点不能重复选择"
                })
                return
            }
        }
        if (name == "paypointe2") {
            if (this.state.paypointe1 && this.state.paypointe1.value == newValue.value) {
                Toast.show({
                    type: "error",
                    content: "同一节点不能重复选择"
                })
                return
            }
            if (this.state.paypointe1 && this.state.paypointe1.value > newValue.value) {
                Toast.show({
                    type: "error",
                    content: "第二个节点必须在第一个之后"
                })
                return
            }
        }
        if (name == "payProportion1") {
            if (newValue.text == "自定义") {
                this.setState({
                    showConfirm: true
                })
            } else {
                if (newValue.text.slice(0, -1) != 100) {
                    var payProportion = 100 - newValue.text.slice(0, -1) + "%";
                    if (this.state.proTotalMoney) {
                        this.setState({
                            payProportion2: {
                                value: 0,
                                text: payProportion,
                            },
                            proMoney2: (parseFloat(this.state.proTotalMoney) * parseFloat(payProportion) / 100).toString(),
                            hide: false
                        })
                    } else {
                        Toast.show({
                            type: 'error',
                            content: '请输入支付总金额'
                        })
                    }
                    this.paypointerNum = 2;
                } else {
                    this.paypointerNum = 1;
                    formName = [{ label: "支付总金额", name: "proTotalMoney", mark: 1 }, { label: "支付节点1", name: "paypointe1", mark: 0 }, { label: "支付比例1", name: "payProportion1", mark: 0 }, { label: "项目金额1", name: "proMoney1", mark: 1 }]
                    this.setState({
                        hide: true
                    })
                }
                if (this.state.proTotalMoney) {
                    this.setState({
                        [name]: newValue,
                        proMoney1: (parseFloat(this.state.proTotalMoney) * parseFloat(newValue.text) / 100).toString()
                    });
                } else {
                    Toast.show({
                        type: 'error',
                        content: '请输入支付总金额'
                    })
                }
            }
        } else {
            this.setState({
                [name]: newValue,
            });
        }
    }
    handleAddpersonCb(names) {
        this.otherData.spr = names
    }
    handleAddpersonCs(names) {
        this.otherData.csr = names
    }
    handleAddpersonUnionid(unionids) {
        this.otherData.approvers_id = unionids
    }
    handlecsrUnionid(unionids) {
        this.otherData.cc_list_id = unionids
    }
    formSubmit() {
        if (this.state.loading) return;
        var formdata = {}
        var boo = false;
        formName = this.state.hide ?
            [{ label: "支付总金额", name: "proTotalMoney", mark: 1 }, { label: "支付节点1", name: "paypointe1", mark: 0 }, { label: "支付比例1", name: "payProportion1", mark: 0 }, { label: "支付金额1", name: 'proMoney1', mark: 1 },] :
            [{ label: "支付总金额", name: "proTotalMoney", mark: 1 }, { label: "支付节点1", name: "paypointe1", mark: 0 }, { label: "支付比例1", name: "payProportion1", mark: 0 }, { label: "支付金额1", name: 'proMoney1', mark: 1 }, { label: "支付节点2", name: "paypointe2", mark: 0 }, { label: "支付比例2", name: "payProportion2", mark: 0 }, { label: "支付金额2", name: 'proMoney2', mark: 1 },];
        if (!this.state.proName) {
            Toast.show({
                type: 'error',
                content: "所属项目名称不能为空",
            });
        }
        // this.state.finish_time.push(getTime())
        formdata.proName = this.state.proName.text;
        formdata.finish_time = this.state.finish_time;
        formdata.proNum = this.state.proNum;
        for (var i = 0; i < formName.length; i++) {
            if (!this.state[formName[i].name]) {
                boo = false;
                Toast.show({
                    type: 'error',
                    content: formName[i].label + "不能为空",
                });
                break;
            } else {
                boo = true;
                formdata[formName[i].name] = this.state[formName[i].name].text ? this.state[formName[i].name].text : this.state[formName[i].name];
            }
        }
        if (!this.state.path_name) {
            boo = false;
            Toast.show({
                type: 'error',
                content: `文件存储区域不能为空`
            });
        }
        if (this.otherData.spr && !!this.otherData.spr.length) {
            if (boo) {
                this.otherData.upfileName = JSON.stringify(this.refs.fileselect.fileData)
                this.otherData.proj_webhook = this.state.proj_webhook;
                this.otherData.folder_id = this.state.folder_id;
                this.setState({ loading: true }, () => {
                    if (this.props.pagedata) {
                        Actions.sendForm({ node: formName, data: formdata, pagedata: this.props.pagedata, edit: this.props.edit }, this.paypointerNum, this.otherData, boo);
                    } else {
                        Actions.sendForm({ node: formName, data: formdata }, this.paypointerNum, this.otherData)
                    }
                })
            }
        } else {
            Toast.show({
                type: 'error',
                content: "审批人不能为空",
            });
        }
    }
    setPathName(path_name) {
        this.setState({ path_name })
    }
    //获取文件组件数据
    // getFileData(type,data){
    //     this.otherData.upfileName = JSON.stringify(data)
    // }

    render() {
        let t = this
        return (
            <div className="payplan myform">
                <Dialog
                    key="d-confirm"
                    title="自定义支付比例"
                    show={t.state.showConfirm}
                    type="confirm"
                    onConfirm={() => { t.handleShow(true, t.refs.input.value); }}
                    onCancel={() => { t.handleShow(false); }}
                >
                    <input type="text" ref="input" className="dialog_input" />
                </Dialog>
                <Group.List >
                    <SelectField
                        label="所属项目名称"
                        placeholder="请选择"
                        className="photoBox"
                        options={t.state.proNameAll}
                        value={t.state.proName}
                        readOnly={t.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'proName')}
                    />
                    <TextField
                        label="项目编号"
                        value={t.state.proNum}
                        readOnly={true}
                        onChange={t.handleTextChange.bind(t, 'proNum')}
                    />
                </Group.List>
                <Group.List >
                    <TextField
                        className="suffix"
                        label="支付总金额"
                        value={t.state.proTotalMoney.replace(/万元/, '')}
                        readOnly={t.props.edit}
                        onChange={t.handleTextChange.bind(t, 'proTotalMoney')}>
                    </TextField>
                    <SelectField
                        label="支付节点1"
                        placeholder="请选择"
                        options={paypointeName}
                        value={t.state.paypointe1}
                        readOnly={t.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'paypointe1')}
                    />
                    <SelectField
                        label="支付比例1"
                        placeholder="请选择"
                        options={options}
                        value={t.state.payProportion1}
                        readOnly={t.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'payProportion1')}
                    />
                    <TextField
                        className="suffix"
                        label="支付金额1"
                        value={t.state.proMoney1.replace(/万元/, '')}
                        readOnly={true}
                    />
                </Group.List>
                <Group.List className={classNames({ 'hide': t.state.hide })}>
                    <SelectField
                        label="支付节点2"
                        placeholder="请选择"
                        options={paypointeName}
                        className="photoBox"
                        value={t.state.paypointe2}
                        readOnly={t.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'paypointe2')}
                    />
                    <SelectField
                        label="支付比例2"
                        placeholder="请选择"
                        value={t.state.payProportion2}
                        readOnly={t.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'payProportion2')}
                    />
                    <TextField
                        className="suffix"
                        label="支付金额2"
                        value={t.state.proMoney2.replace(/万元/, '')}
                        readOnly={true}
                    />
                </Group.List>
                <Fileselect
                    ref='fileselect'
                    upfileName={t.state.upfileName}
                    proName={t.state.proName}
                    edit={t.props.edit}
                    folder_id={t.state.folder_id}
                    process_folder={true}//是不是需要审批通过才存储文件
                    pathdata={t.state.pathdata}
                    path_name={t.state.path_name}
                    setPathName={t.setPathName.bind(t)}
                    message="payment-payplan"
                // getFileData={t.getFileData.bind(t)}
                />
                <Group.List>
                    <Addpersonfield
                        label="发送给：甲方"
                        cb={t.handleAddpersonCb.bind(t)}
                        union={t.handleAddpersonUnionid.bind(t)}
                        approvers={t.state.approvers}
                        approvers_id={t.state.approvers_id}
                        maxLength="1"
                    />
                </Group.List>
                <Group.List>
                    <Addpersonfield label="抄送人"
                        cb={t.handleAddpersonCs.bind(t)}
                        union={t.handlecsrUnionid.bind(t)}
                        approvers={t.state.cc_list}
                        approvers_id={t.state.cc_list_id}
                        maxLength="1"
                    />
                </Group.List>
                <Button type="primary" loading={t.state.loading} className="submitBtn" onClick={t.formSubmit.bind(t)}>提交</Button>
            </div>
        );
    }

    componentWillMount() {
        var pagedata = {};
        if (this.props.pagedata) {
            pagedata.proName = this.props.pagedata.proName;
            pagedata.proNum = this.props.pagedata.proNum;
            pagedata.change_id = this.props.pagedata.process_id;
            pagedata.folder_id = this.props.pagedata.folder_id;
            pagedata.finish_time = this.props.pagedata.finish_time;
            this.otherData.spr = this.props.pagedata.approvers;
            this.otherData.csr = this.props.pagedata.cc_list;
            this.otherData.approvers_id = this.props.pagedata.approvers_id;
            this.otherData.cc_list_id = this.props.pagedata.cc_list_id;
            this.otherData.proj_webhook = this.props.pagedata.proj_webhook;
            for (let i = 0; i < this.props.pagedata.node_info.length; i++) {
                if (this.props.pagedata.node_info[i].name == "上传附件") {
                    try {
                        pagedata.upfileName = JSON.parse(this.props.pagedata.node_info[i].value);
                        this.otherData.upfileName = pagedata.upfileName;
                        pagedata.path_name = pagedata.upfileName[0].selected_folder_pathname;
                    } catch (e) {
                        pagedata.upfileName = [];
                    }
                }
                for (let j = 0; j < formName.length; j++) {
                    if (this.props.pagedata.node_info[i].name == formName[j].label) {
                        if (formName[j].mark == 0) {
                            pagedata[formName[j].name] = { value: 0, text: this.props.pagedata.node_info[i].value };
                        } else {
                            pagedata[formName[j].name] = this.props.pagedata.node_info[i].value;
                        }
                    }
                }
            }
        }
        Object.assign(this.state, pagedata)
        if (pagedata["payProportion1"] && pagedata.payProportion1.text == "100%") {
            this.setState({
                hide: true
            })
        }
    }

    componentDidMount() {
        Actions.fetch();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.pagedata.approvers && nextProps.pagedata.approvers instanceof Array)
            this.setState({
                approvers: nextProps.pagedata.approvers,
                approvers_id: nextProps.pagedata.approvers_id,
            });
        else if (nextProps.pagedata.approvers && typeof nextProps.pagedata.approvers == 'string')
            this.setState({
                approvers: [nextProps.pagedata.approvers],
                approvers_id: [nextProps.pagedata.approvers_id]
            });
        if (nextProps.pagedata.cc_list && nextProps.pagedata.cc_list instanceof Array)
            this.setState({
                cc_list: nextProps.pagedata.cc_list,
                cc_list_id: nextProps.pagedata.cc_list_id
            });
        else if (nextProps.pagedata.cc_list && typeof nextProps.pagedata.cc_list == 'string')
            this.setState({
                cc_list: [nextProps.pagedata.cc_list],
                cc_list_id: [nextProps.pagedata.cc_list_id]
            })
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Payplan, Reflux.connect(Store));

module.exports = Payplan;
